<template>
  <div class="p-6">
    <!-- 搜索/筛选 -->
    <a-space class="mb-4">
      <a-input v-model:value="filters.keyword" placeholder="搜索操作/描述" style="width: 250px" />
      <a-select v-model:value="filters.level" placeholder="日志级别" style="width: 150px" allow-clear>
        <a-select-option value="INFO">INFO</a-select-option>
        <a-select-option value="WARN">WARN</a-select-option>
        <a-select-option value="ERROR">ERROR</a-select-option>
      </a-select>
      <a-date-picker
        v-model:value="filters.dateRange"
        type="daterange"
        placeholder="选择时间范围"
      />
      <a-button type="primary" @click="fetchLogs">搜索</a-button>
    </a-space>

    <!-- 日志表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredLogs"
      row-key="id"
      :pagination="{ pageSize: 10 }"
      bordered
      @row-click="openDetails"
      :scroll="{ x: 1000 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'level'">
          <a-tag :color="levelColor(record.level)">
            {{ record.level }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="link" @click.stop="openDetails(record)">查看</a-button>
        </template>
        <template v-else>
          {{ record[column.dataIndex] }}
        </template>
      </template>
    </a-table>

    <!-- 日志详情抽屉 -->
    <a-drawer
      title="日志详情"
      :visible="showDetails"
      :width="500"
      @close="showDetails = false"
      placement="right"
    >
      <div v-if="selectedLog">
        <p><strong>时间：</strong>{{ selectedLog.time }}</p>
        <p><strong>操作用户：</strong>{{ selectedLog.user }}</p>
        <p><strong>模块/类型：</strong>{{ selectedLog.module }}</p>
        <p><strong>日志级别：</strong>{{ selectedLog.level }}</p>
        <p><strong>描述：</strong>{{ selectedLog.description }}</p>
        <p><strong>请求参数：</strong></p>
        <pre>{{ selectedLog.request }}</pre>
        <p><strong>响应内容：</strong></p>
        <pre>{{ selectedLog.response }}</pre>
        <p><strong>IP：</strong>{{ selectedLog.ip }}</p>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const logs = ref([
  {
    id: 1,
    time: '2025-09-02 10:12:34',
    user: 'alice',
    module: '用户管理',
    level: 'INFO',
    description: '新增用户 bob',
    request: '{"username":"bob"}',
    response: '{"code":200}',
    ip: '192.168.1.10'
  },
  {
    id: 2,
    time: '2025-09-02 10:20:10',
    user: 'bob',
    module: '接口管理',
    level: 'ERROR',
    description: '接口 /api/users 访问失败',
    request: '{"method":"GET"}',
    response: '{"code":500}',
    ip: '192.168.1.11'
  },
  // 可继续添加日志记录
])

const filters = ref({ keyword: '', level: '', dateRange: null })
const selectedLog = ref(null)
const showDetails = ref(false)

const columns = [
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '操作用户', dataIndex: 'user', key: 'user' },
  { title: '模块/类型', dataIndex: 'module', key: 'module' },
  { title: '日志级别', dataIndex: 'level', key: 'level' },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '操作', key: 'action' }
]

const filteredLogs = computed(() => {
  return logs.value.filter(log => {
    const matchKeyword = !filters.value.keyword || log.user.includes(filters.value.keyword) || log.description.includes(filters.value.keyword)
    const matchLevel = !filters.value.level || log.level === filters.value.level
    const matchDate = !filters.value.dateRange ||
      (new Date(log.time) >= new Date(filters.value.dateRange[0]) &&
       new Date(log.time) <= new Date(filters.value.dateRange[1]))
    return matchKeyword && matchLevel && matchDate
  })
})

function fetchLogs() { console.log('搜索条件：', filters.value) }
function openDetails(log) { selectedLog.value = log; showDetails.value = true }
function levelColor(level) {
  switch(level){
    case 'INFO': return 'blue'
    case 'WARN': return 'orange'
    case 'ERROR': return 'red'
    default: return 'gray'
  }
}
</script>
